<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          box-sizing: border-box;
      }

      table {
          /**
             table-layout CSS属性定义了用于布局表格单元格，行和列的算法。
             auto: 大多数浏览器采用自动表格布局算法对表格布局。
                  【表格及单元格的宽度取决于其包含的内容：当单元格内容超出了对其设置了width时，这时的width将会无效，单元格会自动撑开，在内容没超过时一般有点作用】。

             fixed: 表格和列的宽度通过表格的宽度（可以是百分比）来设置，单独设置的话：【某一列的宽度仅由该列首行的单元格决定】（很重要）。 可以使用这个属性写出文字溢出省略号的样式

             使用fixed布局
             优点：整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，
             缺点：首行其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow  属性控制是否允许内容溢出。
           */
          table-layout: fixed;
          width: 120px;
          border: 1px solid red;
      }

      td {
          border: 1px solid blue;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
  </style>
</head>
<body>
<table>
  <tr>
    <td>Ed</td>
    <td>Wood</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>Schweitzer</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Fonda</td>
  </tr>
  <tr>
    <td>William</td>
    <td>Shakespeare</td>
  </tr>
</table>
</body>
</html>
